<!-- 标签页
-->
<template>
  <div ref="scroll_x" @mousewheel="handelScroll" class="scroll">
                        <div v-for="(item, index) in opentags" :key="item.path" class="mx-1">
                           <el-dropdown trigger="contextmenu" @command="handlercommand" @contextmenu.native="hidde">
                              <el-tag :class="{ 'active': item.path == route.path }"
                                 :closable="item.path != '/index/dashboard'" type="info" @close="remotag(index)"
                               @click="tabs(index)" >
                                 <el-icon :class="item.path == route.path ? '' : 'icon'">
                                    <LocationFilled />
                                 </el-icon>
                                 <span>{{ $t(item.meta.title) }}</span>
                              </el-tag>
                              <template #dropdown>
                                 <!-- 下拉菜单 -->
                                 <el-dropdown-menu>
                                    <el-dropdown-item :icon="RefreshLeft"
                                       :command="{ code: 1, path: item.path }">刷新</el-dropdown-item>
                                    <!-- 下标最后一个或者第一个就禁用 -->
                                    <el-dropdown-item :icon="CloseBold"
                                       :disabled="index == opentags.length - 1 || opentags.length == 1"
                                       :command="{ code: 2, path: item.path }">关闭右侧标签</el-dropdown-item>
                                    <!-- 下标只有一个就禁用 -->
                                    <el-dropdown-item :icon="CircleClose" :disabled="opentags.length == 1"
                                       :command="{ code: 3, path: item.path }">全部关闭</el-dropdown-item>
                                 </el-dropdown-menu>
                              </template>
                           </el-dropdown>
                        </div>
                       </div>
</template>
<script setup lang="ts">
import {ref,reactive,watch,computed} from 'vue'
import {  LocationFilled, RefreshLeft, CloseBold, CircleClose } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import {useTagsStore} from '@/stores/tag'
const scroll_x = ref() //标签页滚动
// 横向滚动
function handelScroll(e: any) {
   console.log(e);
    const scrollLeft = scroll_x.value.scrollLeft;//元素左边滚动条0开始
    const offsetWidth = scroll_x.value.offsetWidth;//元素的宽度
    const scrollWidth = scroll_x.value.scrollWidth;//滚动条宽度
    if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) {// e.wheelDelta < 0代表鼠标向下滚动
        scroll_x.value.scrollLeft = scroll_x.value.scrollLeft + 100;
    } else if (e.wheelDelta > 0 && scrollLeft > 0) {//这里说明到达底部往后滚动时
        scroll_x.value.scrollLeft = scroll_x.value.scrollLeft - 100;
    }
}
const language=localStorage.getItem('language')
const route = useRoute()//获得路由参数
const router = useRouter()//路由跳转
const store=useTagsStore()//pinia
const opentags=computed(()=>store.taglist)
// 移除标签
const remotag = (index: number) => {
   store.deletetag(index)
 
}

const tabs = (index: number) => {
   store.clicktag(index)
}



const hidde=()=>{//模拟body点击事件
   document.body.click()
}
// addtag(route)//创建后触发
// 监听路由变化
watch(route, (route) => {
   let index=-1//赋值-1
   // 添加与编辑处理添加到商品列表后面
   if ("productcreate"===route.name||"productmodify"===route.name) {//路由名称相等时
      let findIndex=opentags.value.findIndex((item:any)=>'goodslist'===item.name)//页面所有打开的蓝色tag里面有等于商品列表时返回下标
      if (-1!==findIndex) {//查找到
         index=findIndex+1//将下标+1
      }
   }
   store.pushtag(route,index)
})
store.pushtag(route)
const handlercommand = ({ code, path }: { code: number, path: string }) => {//下拉菜单的回调事件
   let opentaged=opentags.value
   switch (code) {
      case 1://刷新
      let tag=opentaged.findIndex(v=>v.path==path)//返回当前元素
      store.Refresh(tag)
         break;
      case 2://关闭右侧
         let index=opentaged.findIndex(item=>item.path==path)//当前列表行tag标签所有路由等于列表循环的路由返回下标(点击的当前下标)
         store.closeright(index)
         break
      case 3:
         store.closeall()//关闭所有标签
         break

      default:
         break;
   }

}
</script>
<style lang="less">
.scroll{
          display: flex;
          overflow-x: hidden;
      }
      .icon {
         display: none;
      }

      .mx-1 {
         margin: 5px;

         .active {
            background-color: rgb(0, 136, 255);
            color: white;
         }
      }</style>